<template>
    <div class="wrap">
        <div class="wrap-util">
            <a-button type="primary" class="mr-10">新增</a-button>
            <a-button type="dashed" class="mr-10">修改</a-button>
            <a-button type="danger" class="mr-10">删除</a-button>
            <a-button class="mr-10">导入</a-button>
            <a-button class="mr-10">导出</a-button>
        </div>
        <div class="table">

            <table>
                <thead>
                <tr>
                    <th>头像</th>
                    <th>昵称</th>
                    <th>登录名</th>
                    <th>电子邮箱</th>
                    <th>角色</th>
                    <th>创建日期</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in userList">
                    <td>
                        <a-avatar
                                style="position: relative;top: -2px;"
                                :src="item.head"
                        />
                    </td>
                    <td>
                        {{item.nickname}}
                    </td>
                    <td>
                        {{item.username}}
                    </td>
                    <td>
                        {{item.email}}
                    </td>
                    <td>
                        <span v-for="role in item.roles">
                            <a-tag color="#f50" v-if="role.role=='ROLE_ADMIN'">管理员</a-tag>
                            <a-tag color="#2db7f5" v-if="role.role=='ROLE_NONE'">用户</a-tag>
                         </span>
                    </td>
                    <td>
                        {{parseDatetime(item.created)}}
                    </td>
                    <td>
                        <a @click="edit(item.id)"><EditOutlined/>编辑</a>
                        <a-divider type="vertical"/>
                        <a-popconfirm @confirm="delBlog(item.id)" title="确定删除？" ok-text="删除" cancel-text="取消">
                            <a><DeleteOutlined/>删除</a>
                        </a-popconfirm>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
        <div class="pagination">
            <a-pagination
                    align="center"
                    :show-total="total => `共 ${total} 条数据`"
                    show-quick-jumper
                    show-size-changer
                    :page-size-options="pageSizeOptions"
                    v-model:current="current"
                    v-model:pageSize="pageSize"
                    :total="total"
                    @showSizeChange="onShowSizeChange"
            >
                <template #buildOptionText="props">
                    <span v-if="props.value !== '100'">{{ props.value }}条/页</span>
                    <span v-else>全部显示</span>
                </template>
            </a-pagination>
        </div>

    </div>
</template>
<script>

    import {defineComponent, toRefs, onBeforeMount, reactive} from 'vue';
    import {userList} from "../../../api/admin";
    import {EditOutlined,DeleteOutlined} from "@ant-design/icons-vue"
    import {parseDatetime} from "../../../utils/util"
    export default defineComponent({
        name: "Administrators",
        setup() {

            const state = reactive({
                userList: [],
                current: 1,
                pageSize: 10,
                total: 0
            });

            const getUserList = (current, pageSize) => {
                userList(current, pageSize).then(resp => {
                    state.userList = resp.data.records;
                    state.total = resp.data.total;
                    console.log(state.userList);
                    state.userList.forEach(user=>{
                        if(!user.head.startsWith("http")){
                            user.head=window.apiPath+user.head;
                        }
                    })

                })
            }
            const onShowSizeChange = (current, pageSize) => {
                //console.log(current, pageSize);
            };

            onBeforeMount(() => {
                getUserList(state.current, state.pageSize);
            });

            return {
                ...toRefs(state),
                onShowSizeChange,
                parseDatetime
            };
        },

        components: {
            EditOutlined,
            DeleteOutlined
        },
    });
</script>

<style scoped lang="less">
    .mr-10 {
        margin-right: 10px;
    }
</style>